<template>
  <div class="add">
    <BaseDialog
      :title="isType === 'add' ? '新增' : '编辑'"
      width="1000px"
      v-model:visible="innerVisible"
      :renderDefaultFooter="false"
    >
      <MyForm
        v-model:formData="formData"
        v-model:columns="formColumns"
        :rules="rules"
        :labelWidth="100"
        :saveBtnLoading="saveBtnLoading"
        background="#fff"
        @submit="onSubmit"
        @cancel="innerVisible = false"
      >
      </MyForm>
    </BaseDialog>
  </div>
</template>
<script setup lang="tsx">
import { ref, computed, onMounted, watch } from "vue";
import * as api from "@/api/index.js";
import i18n from "@/lang/index.js";
import { ElMessage } from "element-plus";
import {
  getSubZhEn,
  columnFilters,
  tabelColumnFilters,
} from "@/utils/mUtils.js";
const props = defineProps({
  visible: {
    type: Boolean,
  },
  currRow: {
    type: Object,
    default: () => null,
  },
  isType: {
    type: String,
    default: "add",
  },
});
const emits = defineEmits(["update:visible", "onSubmit"]);
const innerVisible = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emits("update:visible", val);
  },
});
const formData = ref({
  nodeList: [],
});
const formColumns = ref([
  {
    title: "",
    structure: [
      {
        formLayout: "el-row",
        content: [
          {
            label: i18n.global.t("单据类型"),
            type: "label_select",
            prop: "documentTypeCode",
            name: "documentTypeName",
            props: {
              label: "subName",
              value: "subCode",
            },
            options: [],
            span: 8,
          },
          {
            label: i18n.global.t("订单类型"),
            type: "label_select",
            prop: "orderTypeCode",
            name: "orderTypeName",
            props: {
              label: "subName",
              value: "subCode",
            },
            options: [],
            span: 8,
          },
          {
            label: i18n.global.t("运输方式"),
            type: "label_select",
            prop: "deliveryMethodCode",
            name: "deliveryMethodName",
            props: {
              label: "subName",
              value: "subCode",
            },
            options: [],
            span: 8,
          },
          {
            label: i18n.global.t("收货方式"),
            type: "label_select",
            prop: "receiveGoodsType",
            props: {
              label: "label",
              value: "value",
            },
            options: [
              {
                value: 0,
                label: i18n.global.t("客户自送"),
              },
              {
                value: 1,
                label: i18n.global.t("上门提货"),
              },
            ],
            span: 8,
          },
        ],
      },
    ],
  },
  {
    title: "",
    structure: [
      {
        type: "tabel",
        tableId: "nodeList",
        tableIndex: 0,
        prop: "nodeList",
        keepSourceKey: "nodeCode",
        height: 400,
        columns: [
          {
            type: "checkbox",
            width: 50,
            fixed: "left",
            align: "center",
          },
          {
            title: "货运节点",
            field: "nodeCode",
            editRender: {},
            params: {
              options: [],
              change: (val, rowIndex, row, options) => {
                row.nodeName = val.option.label;
              },
              key: "subName",
              value: "subCode",
              label: "subName",
              transfer: true,
            },
            slots: { edit: "select_edit" },
            formatter: ({ cellValue, row }) => {
              return row.nodeName;
            },
          },
          {
            title: "是否可撤回",
            field: "revokeFlag",
            editRender: {},
            slots: {
              edit: ({ row }) => {
                return [
                  <el-switch
                    v-model={row.revokeFlag}
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #cfcfcfbf"
                    active-value={1}
                    inactive-value={0}
                  />,
                ];
              },
            },
            formatter: ({ cellValue, row }) => {
              const obj = {
                0: i18n.global.t("否"),
                1: i18n.global.t("是"),
              };
              return obj[cellValue] || "";
            },
          },
          {
            title: "是否可编辑",
            field: "editFlag",
            editRender: {},
            slots: {
              edit: ({ row }) => {
                return [
                  <el-switch
                    v-model={row.editFlag}
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #cfcfcfbf"
                    active-value={1}
                    inactive-value={0}
                  />,
                ];
              },
            },
            formatter: ({ cellValue, row }) => {
              const obj = {
                0: i18n.global.t("否"),
                1: i18n.global.t("是"),
              };
              return obj[cellValue] || "";
            },
          },
        ],
        editRules: {
          nodeCode: [
            {
              required: true,
              message: i18n.global.t("请输入货运节点"),
              trigger: ["change"],
            },
          ],
        },
        multipleSelection: [],
        buttonType: ["add", "delete"],
        batchDelete: true,
      },
    ],
    hide: false,
  },
]);
const rules = ref({
  documentTypeCode: [
    {
      required: true,
      message: i18n.global.t("请选择单据类型"),
      trigger: "change",
    },
  ],
  orderTypeCode: [
    {
      required: true,
      message: i18n.global.t("请选择订单类型"),
      trigger: "change",
    },
  ]
});
const saveBtnLoading = ref(false);
onMounted(() => {
  onGetSub();
  if (props.isType === "edit") {
    getInfo();
    return;
  }
});
const onGetSub = () => {
  getSubZhEn({
    code: "030,020,021,031",
  }).then((res) => {
    columnFilters(formColumns.value, "documentTypeCode").options = res["030"];
    columnFilters(formColumns.value, "orderTypeCode").options = res["020"];
    columnFilters(formColumns.value, "deliveryMethodCode").options = res["021"];
    tabelColumnFilters(
      columnFilters(formColumns.value, "nodeList").columns,
      "nodeCode"
    ).params.options = res["031"];
  });
};
const getInfo = async () => {
  saveBtnLoading.value = true;
  try {
    const { data } = await api.default.common.nodeConfiguration.getInfo(
      props.currRow.id
    );
    formData.value = {
      ...data,
      nodeList: data.nodeList || [],
    };
    saveBtnLoading.value = false;
  } catch (e) {
    saveBtnLoading.value = false;
  }
};

const onSubmit = () => {
  const parmas = {
    ...formData.value,
  };
  if (props.isType === "add") {
    // 新增
    saveBtnLoading.value = true;
    api.default.common.nodeConfiguration
      .add({
        ...parmas,
      })
      .then(() => {
        ElMessage.success("新增成功");
        innerVisible.value = false;
        saveBtnLoading.value = false;
        emits("onSubmit");
      })
      .catch(() => {
        saveBtnLoading.value = false;
      });
  } else {
    // 编辑
    saveBtnLoading.value = true;
    api.default.common.nodeConfiguration
      .edit(parmas)
      .then(() => {
        ElMessage.success("修改成功");
        innerVisible.value = false;
        saveBtnLoading.value = false;
        emits("onSubmit");
      })
      .catch(() => {
        saveBtnLoading.value = false;
      });
  }
};
</script>
<style lang="scss" scoped>
.search-btn {
  width: 120px;
  margin: 20px auto 0;
}
</style>
